<template>
  <div class="userLogin">
    <van-nav-bar title="用户信息" />
    <!-- -->
    <div v-if="uId == null">
      <van-tabs v-model="active">
        <van-tab title="用户登录" name="1"></van-tab>
        <van-tab title="用户注册" name="2"></van-tab>
      </van-tabs>
      <div v-if="active == 1">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >立即登录</van-button
            >
          </div>
        </van-form>
      </div>
      <div v-if="active == 2">
        <van-form @submit="onSubmit1">
          <van-field
            v-model="name"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            maxlength="11"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="pass"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />

          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >立即注册</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
    <div class="userLogin-name" v-else>
      <div class="sign-out">
        <span @click="$router.push('/changePassword')">修改密码</span>
        <span @click="propose">退出</span>
      </div>
      <div class="userLogin-information">
        <img src="../assets/tx.jpg" alt="" />
      </div>
      <div style="text-align: center">{{ this.username }}</div>
      <van-grid style="margin-top: 20px">
        <van-grid-item
          icon="location-o"
          text="地址"
          @click="$router.push('/addressList')"
        />
        <van-grid-item icon="certificate" text="我的订单" @click="order" />
      </van-grid>
      <div>
        <img src="../assets/imgs/cnxh.jpg" alt="" />
      </div>
      <div class="goods-list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="goods-img"
          @click="clickDetail"
        >
          <img :src="item.goodsImg" alt="" />
          <div class="goods-info">
            <div class="goods-name" style="margin-top: 15px">
              {{ item.goodsName }}
            </div>
            <div
              class="goods-name"
              style="font-size: 12px; color: rgb(147, 147, 147)"
            >
              {{ item.slogan }}
              &nbsp;
            </div>
            <div class="goods-name" style="font-size: 12px">
              <span style="color: rgb(255, 136, 0)">自营 </span> &nbsp;
              <span style="background: rgb(255, 136, 0); border-radius: 5px"
                >次日达
              </span>
              &nbsp;
              <span style="color: rgb(175, 82, 239)">深圳平湖仓 </span>
            </div>
            <div class="price-cart">
              <span>{{ item.mallPrice }}</span>
              <van-icon name="cart-o" size="30" color=" rgb(255, 136, 0)" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Notify, Dialog } from "vant";
import { userRegsit, userDologin, checkLikeList } from "../common/Api/index.js";
export default {
  data() {
    return {
      active: 1,
      username: "",
      password: "",
      arr: false,
      list: [],
      name: "", //注册
      pass: "", //注册，
      uId: null,
      phone: "",
    };
  },

  created() {
    this.checkLike();
    if (sessionStorage.getItem("information")) {
      this.uId = JSON.parse(sessionStorage.getItem("information")).uId;
    } else {
      this.uId = null;
    }
  },
  methods: {
    order() {
      sessionStorage.setItem("active", JSON.stringify("setting"));
      this.$router.push("/orderList");
    },
    checkLike() {
      checkLikeList({ key: "", pagnum: 1, limit: 100 }).then((res) => {
        this.list = res.records;
      });
    },
    propose() {
      Dialog.confirm({
        title: "提出提醒",
        message: "确认退出用户吗",
      })
        .then(() => {
          this.uId = null;
          this.username = "";
          this.password = "";
          sessionStorage.removeItem("information");
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    },
    onSubmit() {
      userDologin({
        userName: this.username,
        password: this.password,
      }).then((res) => {
        console.log(res);
        if (res == null || res == "") {
          Notify({ type: "danger", message: "用户名不存在或用户名密码错误" });
        } else {
          this.uId = res.uid;
          sessionStorage.setItem("information", JSON.stringify(res));
          Notify({ type: "success", message: "登陆成功" });
        }
      });
    },
    onSubmit1() {
      let users = {
        userName: this.name,
        password: this.pass,
        phone:this.phone
      };
      userRegsit(users).then((res) => {
        if (res == 1) {
          this.active = 1;
          Notify({ type: "success", message: "注册成功" });
          this.name = "";
          this.pass = "";
        } else {
          Notify({ type: "danger", message: "用户名重复或输入不正确" });
        }
      });
    },
    clickDetail(val) {
      this.$router.push("detail");
      sessionStorage.setItem("active", JSON.stringify("setting"));
      sessionStorage.setItem("detail", JSON.stringify(val));
    },
  },
};
</script>
<style scoped  lang="scss">
.userLogin {
  .userLogin-name {
    width: 96%;
    margin: auto;
    .userLogin-information {
      padding-top: 30px;
      text-align: center;
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
    }
    .goods-list {
      background: #fff;
      .goods-img {
        display: flex;
        img {
          width: 100px;
          height: 100px;
        }
      }
      .goods-info {
        width: 65%;
        .goods-name {
          font-size: 14px;
          padding: 2px 13px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .price-cart {
          padding: 0 13px;
          background: #fff;
          padding-bottom: 10px;
          display: flex;
          justify-content: space-between;
          span {
            color: rgb(255, 136, 0);
            font-size: 16px;
          }
        }
      }
    }
    .sign-out {
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      background: #fff;
    }
  }
}
</style>